import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
import TableControls from '#cpt/temp/TableControls'
import Controls from '#cpt/temp/Controls'
import Enable from '#cpt/temp/Enable'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page 					= $Lazy.load(()=>import('#tp/page/page-container'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 提交表单列表
		formData : [
			{ label: '标题',			name: 'title', 		full:true,		type: 'textarea',	required:true },
			{ label: '内容',			name: 'content', 	full:true,	 	type: 'textarea',	required:true },
			{ label: '排序',			name: 'sort', 		full:true, 		type: 'number' },
			{ label: '开启',			name: 'enabled', 	full:true,		type: 'radio',data:[{name:'是',value:'1'},{name:'否',value:'0'}] },
		]
	}
	
	model = {}
	
	componentDidMount(){
		this.fetch()
	}
	// paging
	fetch = () => $fn.fetch.call(this,'conf-msg-content/index')
	
	// 表单
		cols = [
			{ title: '模板代码',			dataIndex: 'code', 			width:120 },
			{ title: '模板名称', 		dataIndex: 'title', 		width:150 },
			{ title: '创建时间', 		dataIndex: 'created_at', 	...$fn.table.time },
			{ title: '更新时间', 		dataIndex: 'updated_at', 	...$fn.table.time },
			{ title: '排序', 			dataIndex: 'sort', 			...$fn.table.num },
			{ title: '模板内容', 		dataIndex: 'content', 		width:300 },
			{ title: '状态', 			dataIndex: 'enabled', 		...$fn.table.status, align:'center', render: text => +text === 1 ? '启用' : '禁用' },
			TableControls.controls.call(this, { width: 120 })
	]
	// 表格操作按钮
	table_controls = (text,{ uuid, enabled }) => {
		return [
			TableControls.edit.call(this, 'conf-msg-content/info', { uuid }),				// 编辑
			+enabled === 0 && this.onEnabled(1, uuid),							// 启用
			+enabled === 1 && this.onEnabled(0, uuid),							// 禁用
		]
	}
	// 操作按钮
	controls = () => {
		return [
			Controls.add.call(this),			// 添加
		]
	}
	
	// 禁用/启用
	onEnabled = (enabled, uuid) => Enable.call(this, enabled,  { uuid, api:'conf-msg-content/del', param:{ enabled }, isKeys: !uuid })
	
	render(){
		return (
			<>
				<Page title='消息模板' controls={this.controls()}>
					{/* 表格 */}
					{ Table.call(this) }
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ api: 'conf-msg-content/add', editApi:'conf-msg-content/edit' }) }
			</>
		)
	}
}

export default Index